<template>
    <el-row style="margin: 10px">
        <el-button type="danger" round @click="stopWindchillServer">停止服务器</el-button>
        <el-button type="primary" round @click="svnUpdate">更新代码</el-button>
        <el-button type="primary" round @click="buildWindchillServer">代码编译</el-button>
        <el-button type="success" round @click="startWindchillServer">启动服务器</el-button>
    </el-row>
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
                v-for="fileId in fileIds"
                :key="fileId"
                :label="filesInfos[fileId].title"
                :name="filesInfos[fileId].name"
        >
            <el-card class="box-card" style="height:400px;overflow-y:auto;wdith:100%;text-align: left;">
                <template v-for="lineContent in filesInfos[fileId].content" :key="lineContent" class="text item">
                    {{lineContent}}<br/>
                </template>
            </el-card>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import { h } from 'vue';
    import {useStompClient} from '@/hooks'
    import axios from 'axios'

    export default {
        name: "ServerManager",
        mounted() {
            useStompClient('/websocket?token=kl', '/topic/pullFileLogger', this.messageHandler);
        },
        data() {
            return {
                editableTabsValue: '1',
                fileIds: [],
                filesInfos: {},
            }
        },
        methods: {
            messageHandler(msg) {
                let msgJson = JSON.parse(msg.body);
                let action = msgJson.action;
                if("fileContentAdd" == action){
                    console.log("addFileContent:"+msgJson);
                    this.addFileContent(msgJson)
                }else if("startResult" == action){
                    this.$notify({
                        title: '启动结果',
                        message: h('i', { style: 'color: teal'}, msgJson.content)
                    });
                }else if("stopResult" == action){
                    this.$notify({
                        title: '停止结果',
                        message: h('i', { style: 'color: teal'}, msgJson.content)
                    });
                }else if("buildResult" == action){
                    this.$notify({
                        title: '编译结果',
                        message: h('i', { style: 'color: teal'}, msgJson.content)
                    });
                }else if("svnUpdateResult" == action){
                    this.$notify({
                        title: '代码更新结果',
                        message: h('i', { style: 'color: teal'}, msgJson.content)
                    });
                }
            },
            addFileContent(msgJson){
                let fileId = msgJson.fileId;
                let fileName = msgJson.fileId;
                let lineContent = msgJson.content;
                if (!this.filesInfos[fileId]) {
                    this.fileIds.push(fileId);
                    this.filesInfos[fileId] = {title: fileName, name: fileId, content: []};
                }
                this.filesInfos[fileId].content.unshift(lineContent);
                if (!this.filesInfos[this.editableTabsValue]) {
                    this.editableTabsValue = fileId;
                }
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            stopWindchillServer() {

                axios.post('/windchill/stop')
                    .then((res) => {
                        console.log(res);
                    }).catch((error) => {
                    console.log(error);
                })
            },
            svnUpdate(){
                axios.post('/windchill/svnUpdate')
                    .then((res) => {
                        console.log(res);
                    }).catch((error) => {
                    console.log(error);
                })
            },
            startWindchillServer() {
                axios.post('/windchill/start')
                    .then((res) => {
                        console.log(res);
                    }).catch((error) => {
                    console.log(error);
                })
            },
            buildWindchillServer() {
                axios.post('/windchill/build')
                    .then((res) => {
                        console.log(res);
                    }).catch((error) => {
                    console.log(error);
                })
            }
        }
    }
</script>

<style scoped>

</style>
